<template>
  <template v-if="visible">
    <teleport to="body">
      <div class="zeus-toast-wrapper" :class="toastClasses">
        <div class="zeus-toast">
          <div class="zeus-toast-content">
            <slot name="content" v-if="!enableHtml"></slot>
            <div v-else v-html="htmlContent"></div>
          </div>
          <span
            class="zeus-toast-close"
            v-if="callback"
            @click="closeToast"
          ></span>
        </div>
      </div>
    </teleport>
  </template>
</template>

<script lang="ts">
import { ref, onMounted, computed } from 'vue'
export default {
  props: {
    autoClose: {
      type: [Boolean, Number],
      default: 3,
      validator(value) {
        return value === false || typeof value === 'number'
      },
    },
    callback: {
      type: Function,
      default: undefined,
    },
    htmlContent: {
      type: String,
    },
    enableHtml: {
      type: Boolean,
      default: false,
    },
    position: {
      type: String,
      default: 'top',
      validator(value) {
        return ['top', 'bottom', 'middle'].indexOf(value) >= 0
      },
    },
  },
  setup(props) {
    const visible = ref(true)

    const close = () => {
      visible.value = false
    }

    const closeToast = () => {
      if (props.callback && props.callback() !== false) {
        props.autoClose = 5
        close()
      }
    }
    const toastClasses = computed(() => {
      return {
        [`position-${props.position}`]: true,
      }
    })
    onMounted(() => {
      if (props.autoClose) {
        setTimeout(() => {
          close()
        }, props.autoClose * 1000)
      }
    })

    return {
      visible,
      toastClasses,
      closeToast,
    }
  },
}
</script>

<style lang="scss">
$font-size: 14px;
$toast-height: 40px;
$toast-bg: rgba(0, 0, 0, 0.75);

@keyframes slide-down {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
@keyframes slide-up {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.zeus-toast-wrapper {
  position: fixed;
  left: 50%;
  z-index: 30;
  transform: translateX(-50%);
  &.position-top {
    top: 20px;
    .zeus-toast {
      animation: slide-down 0.4s;
    }
  }
  &.position-bottom {
    bottom: 20px;
    .zeus-toast {
      animation: slide-up 0.4s;
    }
  }
  &.position-middle {
    top: 50%;
    transform: translate(-50%, -50%);
    .zeus-toast {
      animation: fade-in 0.4s;
    }
  }
}
.zeus-toast {
  min-width: 120px;

  background: #edf2fc;

  // min-height: $toast-height;
  line-height: 1.8;
  display: flex;
  align-items: center;
  color: #909399;
  border-radius: 4px;
  padding: 6px 16px;
  border: 1px solid #ebeef5;
  overflow: hidden;

  display: flex;
  justify-content: space-between;
  &-content {
    flex: 1;
    font-size: $font-size;
  }
  &-close {
    cursor: pointer;
    position: relative;
    display: inline-block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    padding-left: 16px;
    &::before,
    &::after {
      content: '';
      position: absolute;
      height: 1px;
      background: #909399;
      width: 100%;
      top: 50%;
      left: 50%;
    }
    &::before {
      transform: translate(-50%, -50%) rotate(-45deg);
    }
    &::after {
      transform: translate(-50%, -50%) rotate(45deg);
    }
  }
}
</style>
